<div
	class="max-w-md p-6 overflow-hidden rounded-lg shadow"
	[ngClass]="['bg' + contrast, 'text' + defaultInv]"
>
	<article class="">
		<h2 class="text-xl font-bold">Sed diam massa, semper a condimentum</h2>
		<p class="mt-4" [ngClass]="['text' + plainInv]">
			Morbi porttitor mi in diam scelerisque commodo. Proin sed laoreet libero. Fusce faucibus
			porttitor lacus, at blandit mauris blandit eget. Donec facilisis lorem et risus commodo,
			quis auctor nulla varius. Pellentesque facilisis feugiat turpis, id molestie augue
			semper quis. Nunc ornare eget est sit amet elementum.
		</p>
		<div class="flex items-center mt-8 space-x-4">
			<img
				class="w-10 h-10 rounded-full bg-gray-500"
				src="https://source.unsplash.com/100x100/?portrait"
				alt=""
			/>
			<div>
				<h3 class="text-sm font-medium">Leroy Jenkins</h3>
				<time datetime="2021-02-18" class="text-sm" [ngClass]="['text' + plainInv]">
					Feb 18th 2021
				</time>
			</div>
		</div>
	</article>
</div>
